<template lang="html">
  <div class="">
    <!--<el-row :gutter="10">-->
    <el-table
      :data="application"
      stripe
      style="width: 100%"
      class="editDialog">
      <el-table-column
        prop="staffId"
        label="员工Id"
        align="center">
      </el-table-column>
      <el-table-column
        prop="staffName"
        label="姓名"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="holidayStart"
        label="假期开始日期"
        :formatter="formatDate1"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        prop="holidayEnd"
        label="假期结束日期"
        :formatter="formatDate2"
        sortable
        align="center">
      </el-table-column>

      <el-table-column
        prop="type"
        label="类型"
        align="center">
      </el-table-column>
      <el-table-column
        label="请假原因"
        prop="reason"
        align="center">
      </el-table-column>
      <el-table-column
        prop="submitTime"
        label="提交日期"
        :formatter="formatDate3"
        sortable
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="160">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="success" size="small" plain  @click="handlePass(scope.row)">通过</el-button>
            <el-button type="danger" size="small" plain  @click="handleReject(scope.row)">不通过</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="10"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total=application.length>
    </el-pagination>

  </div>
</template>

<script>
  export default {
    mounted: function () {
      var storage=window.localStorage;
      this.id=storage.getItem("user_id");
      this.refresh();
    },
    data() {
      return {
        id:null,
        sta:{},
        application:[],
        //表格临时数据
        temp: [],
        //当前页数
        currentPage: 1,
        // 假期详情个人姓名
        displayUseName: '',
        //展示个人假期详情
        dialogTableVisible: false,

      }
    },
    methods: {
      refresh(){
        this.$http.get('api/leavingsystem/application/', {headers:{"Authorization": "1000.123456.1"}}).then(response =>{
          // console.log("good");
          this.application=response.data.data;
          this.application= this.application.filter(ap => ap.status == 0);
          console.log(this.application)
        }, response =>{
          // alert("wrong");
          console.log("wrong");
          // console.log(response.data);
          this.$alert('系统繁忙，请刷新重试', '加载失败', {
            confirmButtonText: '确定',
          });

        });
      },
      formatDate1(row){
        return this.$moment(row.holidayStart).format('YYYY-MM-DD HH:mm:ss');
      },
      formatDate2(row){
        return this.$moment(row.holidayEnd).format('YYYY-MM-DD HH:mm:ss');
      },
      formatDate3(row){
        return this.$moment(row.submitTime).format('YYYY-MM-DD HH:mm:ss');
      },
      handlePass(row){
        this.$confirm('同意此请假请求?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sta.status=1;
          this.sta.approverId=this.id;
          this.$http.put('api/leavingsystem/application/'+row.applicationId,this.sta, {headers:{"Authorization": "1000.123456.1"}, emulateJSON: true}).then(response =>{
            if(response.data.error_code==0){
              this.$notify({
                title: '成功',
                message: '已通过!',
                type: 'success'
              });
            }else{
              this.$notify({
                title: '失败',
                message: '操作失败!',
                type: 'error'
              });
            }
            console.log("good");
            console.log(response.data);
            this.refresh()
          },response=>{
            this.$notify({
              title: '失败',
              message: '操作失败',
              type: 'error'
            });
            console.log("wrong");
            console.log(response.data);
          })
          // this.$http.delete('api/leavingsystem/application/'+row.applicationId, {headers:{"Authorization": "1000.123456.1"}}).then(response =>{
          //   this.$notify({
          //     title: '成功',
          //     message: '删除成功!',
          //     type: 'success'
          //   });
          //   console.log("good");
          //   console.log(response.data);
          //   this.refresh()
          //   // window.location.reload();
          // },response=>{
          //   this.$notify({
          //     title: '失败',
          //     message: '删除失败，请重试',
          //     type: 'error'
          //   });
          //   console.log("wrong");
          // })

        }).catch(() => {

        });
      },
      handleReject(row){
        this.$confirm('拒绝此请假请求?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.sta.status=2;
          this.sta.approverId=this.id;
          this.$http.put('api/leavingsystem/application/'+row.applicationId,this.sta, {headers:{"Authorization": "1000.123456.1"}, emulateJSON: true}).then(response =>{
            if(response.data.error_code==0){
              this.$notify({
                title: '成功',
                message: '已拒绝!',
                type: 'success'
              });
            }else{
              this.$notify({
                title: '失败',
                message: '操作失败!',
                type: 'error'
              });
            }
            console.log("good");
            console.log(response.data);
            this.refresh()
          },response=>{
            this.$notify({
              title: '失败',
              message: '操作失败',
              type: 'error'
            });
            console.log("wrong");
            console.log(response.data);
          })
        }).catch(() => {

        });
      },
      //搜索用户姓名的方法
      // handleNameChange() {
      //   console.log("搜索姓名");
      // },
      // //按照日历搜索数据
      // searchUserDate(item) {
      //   console.log(item);
      // },
      //删除表格数据
      // deleteTableItem (item) {
      //   this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     // let temp = [];
      //     for (let i = 0,len = this.tableData.length; i < len; i++) {
      //       console.log(i);
      //       console.log(this.tableData);
      //       if (this.tableData[i].primary_id !== item.primary_id) {
      //         this.temp.push(this.tableData[i]);
      //         console.log("this.temp");
      //       }
      //     }
      //     this.tableData = this.temp;
      //     this.$notify({
      //       title: '成功',
      //       message: '删除成功!',
      //       type: 'success'
      //     });
      //   }).catch(() => {
      //
      //   });
      // },
      //每页的数量发生改变时
      handleSizeChange(item) {
        console.log(item);
      },
      //跳转到某页
      handleCurrentChange(item) {
        console.log(item)
      },
      // //点击按钮，展示个人假期详情
      // displayVocationInfo(item) {
      //   this.displayUseName = item.user_name;
      //   this.dialogTableVisible = true;
      // }
    }
  }
</script>

<style lang="css">
  .editDialog {
    margin: 40px auto;
  }
</style>
